<template>
    <div class="box-vertical body">
      <div class="box-standard box1 box-border" style="justify-content: space-around;align-content: space-between;">
        <div class=carousel>
          <el-carousel height="300px">
            <el-carousel-item v-for="item in 4" :key="item">
              <h3 class="small">{{ item }}</h3>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="box-vertical" style="justify-content: space-around;height: 300px;">
          <div>
            <h3>基于QEMU嵌入式Linux系统虚拟仿真环境的构建实验</h3>
          </div>
          <div class="button-box">
            <div class="button-content-box">
              <el-button @click="linkTo('introduction')" size="medium" plain>实验介绍</el-button>
              <el-button @click="linkTo('theory')" size="medium" type="primary" plain>实验原理</el-button>
              <el-button @click="linkTo('device')" size="medium" type="success" plain>实验仪器设备</el-button>
            </div>
            <div class="button-content-box">
              <el-button @click="linkTo('method')" size="medium" type="info" plain>实验教学方法</el-button>
              <el-button @click="linkTo('test')" size="medium" type="warning" plain>实验考核要求</el-button>
              <el-button @click="linkTo('result')" size="medium" type="danger" plain>实验结果与结论要求</el-button>
            </div>
          </div>
          <div class="box-standard" style="width: 500px;justify-content: space-around">
            <div>相关知识 | 操作手册
            </div>
            <div class="box-standard">
              <div>
                <el-button type="primary">
                  <a style="text-direction: none;color: white;" href="../assets/docs/operatingSheet.pdf">下载操作手册</a>
                </el-button>
                <p class="notation">
                  当前下载量:{{downloadNum}}
                </p>
              </div>
              <div style="padding: 10px 20px;">
                <el-button v-loading="loading" type="primary" @click="getHostAccount">
                  开始仿真操作
                </el-button>
                <p class="notation">
                  当前获取量:{{operatingNum}}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="box-border information-box">
        <div style="width: 400px;height: 400px;">
          <h3> <i class="el-icon-office-building"></i> 实验资源</h3>
          <el-divider></el-divider>
          <div style="font-size: 14px;">
            <ul>
              <li>
                <a>
                  <p>
                    说明文档
                    <em>
                      下载
                      <i class="el-icon-download"></i>
                    </em>
                  </p>
                </a>
              </li>
              <li>
                <a>
                  <p>
                    说明文档
                    <em>
                      下载
                      <i class="el-icon-download"></i>
                    </em>
                  </p>
                </a>
              </li>
              <li>
                <a>
                  <p>
                    说明文档
                    <em>
                      下载
                      <i class="el-icon-download"></i>
                    </em>
                  </p>
                </a>
              </li>
              <li>
                <a>
                  <p>
                    说明文档
                    <em>
                      下载
                      <i class="el-icon-download"></i>
                    </em>
                  </p>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div style="width: 400px;height: 400px;">
          <h3> <i class="el-icon-office-building"></i> 通知公告</h3>
          <el-divider></el-divider>
          <div style="font-size: 14px;">
            <ul>
              <li>
                <a>
                  <p>
                    说明文档
                    <em>
                      下载
                      <i class="el-icon-download"></i>
                    </em>
                  </p>
                </a>
              </li>
              <li>
                <a>
                  <p>
                    说明文档
                    <em>
                      下载
                      <i class="el-icon-download"></i>
                    </em>
                  </p>
                </a>
              </li>
              <li>
                <a>
                  <p>
                    说明文档
                    <em>
                      下载
                      <i class="el-icon-download"></i>
                    </em>
                  </p>
                </a>
              </li>
              <li>
                <a>
                  <p>
                    说明文档
                    <em>
                      下载
                      <i class="el-icon-download"></i>
                    </em>
                  </p>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <div>
          <div class="block">
            <el-timeline>
              <el-timeline-item timestamp="2018/4/3" placement="top">
                <el-card>
                  <h4>请确认已下载工具</h4>
                  <ul>
                    <li><a href="https://www.netsarang.com/zh/xshell-download/">Xshell</a></li>
                    <li><a href="https://www.filezilla.cn/download">FileZilla</a></li>
                    <li style="color: dodgerblue">
                      <a @click="useShell" style="color: cornflowerblue;text-decoration: underline;">使用webShell</a>
                    </li>
                  </ul>
                </el-card>
              </el-timeline-item>
              <el-timeline-item timestamp="2018/4/12" placement="top">
                <el-card>
                  <h4>当前账号</h4>
                  <table>
                    <tr>
                      <td>主机地址</td>
                      <td>{{host.hostIp}}</td>
                    </tr>
                    <tr>
                      <td>端口</td>
                      <td>{{host.hostPort}}</td>
                    </tr>
                    <tr>
                      <td>用户名</td>
                      <td>{{host.hostAccountUsername}}</td>
                    </tr>
                    <tr>
                      <td>密码</td>
                      <td>{{host.hostAccountPassword}}</td>
                    </tr>
                  </table>
                </el-card>
              </el-timeline-item>
              <el-timeline-item timestamp="2018/4/2" placement="top">
                <el-card>
                  <h4>请仔细阅读操作手册</h4>
                  <p>操作手册</p>
                  <b>注意:</b>账号的有效期约为3个小时
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
      name: "Main",
      data() {
        return {
          loading: false,
          activeName: "first",
          dialogVisible: true,
          downloadNum:'',
          operatingNum:'',
          host:{
            hostIp: 'xxx',
            hostPort: 22,
            hostAccountUsername: 'xxx',
            hostAccountPassword: 'xxx',
          },
          activities: [{
            content: '正在获取账号',
            timestamp: '2018-04-15'
          }, {
            content: '请阅读操作操作手册',
            timestamp: '2018-04-13'
          }]
        };
      },
      methods:{
        handleClose(done) {
          this.$confirm('确认关闭？')
            .then(_ => {
              done();
            })
            .catch(_ => {});
        },
        getHostAccount(){
          let data = this.$data;
          let qs = require("qs");
          data.loading=true;
          //这里的每次访问必须到后端请求,不能用缓存,因为你无法判断缓存是否失效
          this.axios.post("/hostaccount/gethostaccount")
            .then(response => {
              let resData = response.data;
              if(resData.errCode == 200){
                data.dialogVisible = true;
                data.host = resData.data;
                this.operatingCount();
              }else{
                this.$message({
                  message: resData.errMsg,
                  type: "error"
                });
              }
              data.loading = false;
            })
        },
        downloadCount:function () {
          this.axios.post("/statistic/download")
        },
        operatingCount:function () {
          this.axios.post("/statistic/operating")
        },
        planTableSummary:function(){
          return ['合计','-','-','32/32','-','-','-','-']
        },
        relationTableSummary:function(){
          return ['合计','-','-','32','-','-','-','-','-']
        },
        linkTo:function(prop){
          this.$router.push({
            name: "description",
            params: {
              position: prop
            }
          })
        },
        useShell:function(){
          let data = this.$data;
          this.$router.push({
            name: "shell",
            params:{
              hostIp: data.host.hostIp,
              hostPort: data.host.hostPort,
              hostAccountUsername: data.host.hostAccountUsername,
              hostAccountPassword: data.host.hostAccountPassword
            }
          })
        }
      },
      created:function(){
        let data = this.$data;
        const qs = require("qs");
        this.axios.post('/statistic/getall')
          .then(response => {
            let resData = response.data;
            if(resData.errCode == 200){
              data.downloadNum = resData.data[0].statisticCount;  //downloadNum
              data.operatingNum = resData.data[1].statisticCount;  //operatingNum
            }else{
              alert(resData.errMsg);
            }
          })
      }
    }
</script>

<style scoped>

  a:hover{
    cursor: pointer;
  }

  .body{
    width: 100%;
    height: 100%;
    background-color: #f2f2f2;
  }
  .box1{
    width: 1000px;
    height: 400px;
  }
  .carousel{
    width: 400px;
    height: 300px;
  }

  .notation{
    font-size: 10px;
    color: #9e9e9e;
    position: absolute;
    text-align: center;
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .button-box{
    display: flex;
    justify-content: space-around;
    align-content: space-around;
    flex-direction: column;
    width: 350px;
    height: 120px;
  }

  .button-content-box{
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .button-content-box .el-button--medium{
    padding: 0px 0px;
    width: 130px;
    height: 50px;
  }

  .information-box{
    display: flex;
    justify-content: space-around;
    align-content: space-around;
    width: 1000px;
    height: 100%;
  }

  .information-box ul{
    list-style: none;
  }

  .information-box li a{
    padding: 12px 0px;
    display: block;
    border-bottom: 1px solid #ddd;
  }

  .information-box li a:hover{
    color: #3a8ee6;
  }

  .information-box li a em{
    float: right;
    font-style: normal;
    color: #f47273;
  }

  .information-box li a:hover em{
    color: #3a8ee6;
  }
  /************** test ***************/
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 480px;
  }
</style>
